<!-- 经费标准设置 -->
<template>
    <div class="edu-page-warp">
        <inner-breadcrumb v-model="pathKey" :path="path"></inner-breadcrumb>
        <div v-show="pathKey==='main'">
            <condition-card
                shadow="never"
                body-style="padding: 24px 24px 6px 24px;"
                :expandable="false"
                @search="onSubmit(true)"
                @reset="reset"
            >
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item :label="$t('achievementApply.activeFlag')">
                            <el-select
                                v-model="queryForm.enable"
                                style="width: 100%;"
                                clearable
                                :placeholder="$t('common.text.all')"
                            >
                                <el-option
                                    v-for="item in options.enable"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </condition-card>
            <el-card shadow="never">
                <div class="edu-opertion-bar">
                  <div class="float-left">
                    <h1 class="condition-title">{{$t('standardSetting.titleLabel')}}</h1>
                    <KeywordInput v-model="queryForm.name" :placeholder="$t('standardSetting.queryTips')" @enter="onSubmit(true)"></KeywordInput>
                  </div>
                  <div class="float-right">
                      <el-button @click="openFunc('add', {})" type="primary">{{$t('message.add')}}</el-button>
                  </div>
                </div>
                <edu-table
                  ref="tables"
                  :url="tableApi"
                  :total="page.total_"
                  :pageSize="page.pageSize_"
                  :orderFixed="true"
                  :selection="false"
                >
                    <edu-table-column :label="$t('label.name')" min-width="100" prop="name" :show-overflow-tooltip="true"></edu-table-column>
                    <edu-table-column :label="$t('standardSetting.fundLabel')" min-width="90" prop="fund" :show-overflow-tooltip="true"></edu-table-column>
                    <edu-table-column :label="$t('standardSetting.conditionLabel')" min-width="180" prop="standard" :show-overflow-tooltip="true"></edu-table-column>
                    <el-table-column :min-width="90" :label="$t('achievementApply.activeFlag')">
                        <template slot-scope="scope">
                            <el-tag
                                :type="getType(scope.row.enable)"
                            >{{ getStatus(scope.row.enable) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column width="170px" :label="$t('message.operating')" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                v-if="!scope.row.enable"
                                type="text"
                                @click="enableChange(scope.row)"
                            >{{$t('message.enable')}}</el-button>
                            <el-button
                                v-if="scope.row.enable"
                                type="text"
                                @click="enableChange(scope.row)"
                            >{{$t('message.disable')}}</el-button>
                            <el-button
                                type="text"
                                @click="openFunc('edit', scope.row)"
                            >{{$t('message.edit')}}</el-button>
                            <el-button
                                type="text"
                                @click="openFunc('viewDetail', scope.row)"
                            >{{$t('message.Look')}}</el-button>
                            <el-button
                                type="text"
                                @click="deleteFunc(scope.row)"
                            >{{$t('message.delete')}}</el-button>
                        </template>
                    </el-table-column>
                </edu-table>
            </el-card>
        </div>
        <settingAdd
            :isRead="isRead"
            :pathKey="pathKey"
            v-if="pathKey == 'add' || pathKey == 'edit' || pathKey == 'viewDetail'"
            :rowInfo="rowInfo"
            :titleLabel="titleLabel"
            @emit:back="handleBack"
        ></settingAdd>
    </div>
</template>

<script>
import settingAdd from './settingAdd';
import { queryFundsStandard, fundsStandardDel, fundsStandardEnableChange } from "common/src/api/fundManagement/standardSetting";
import SelectTreeVue from '../../../components/common/SelectTree.vue';
export default {
    components: {
        settingAdd
    },
    data() {
        return {
            tableApi: queryFundsStandard,
            queryForm: {
                enable: "",
                name: ''
            },
            page: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0
            },
            options: {
              enable: [
                { label: this.$t('message.yes'), value: true },
                { label: this.$t('message.no'), value: false }
              ],
              status: [
                { label: this.$t('message.enable'), value: true, type: 'success' },
                { label: this.$t('message.disable'), value: false, type: 'danger' }
              ]
            },
            pathKey: 'main',
            path: {
              label: this.$t('standardSetting.titleLabel'),
              key: 'main',
              disable: false,
              children: [
                { label: this.$t('message.add'), key: 'add', disable: true },
                { label: this.$t('message.edit'), key: 'edit', disable: true },
                { label: this.$t('message.Look'), key: 'viewDetail', disable: true },
              ]
            },
            rowInfo: {},
            isRead: false,
            titleLabel: ''
        }
    },
    mounted() {
      this.onSubmit(true);
    },
    methods: {
        openFunc(type, row) {
          // 新增，编辑，查看
          this.titleLabel = type === 'add' ? this.$t('message.add') : (type === 'edit' ? this.$t('message.edit') : this.$t('message.Look'));
          this.isRead = type === 'viewDetail';
          this.rowInfo = row;
          this.pathKey = type;
        },
        onSubmit(refresh) {
            let postData = _.cloneDeep(this.queryForm)
            if(postData.name){
              postData.name = postData.name.toString().trim()
            }
            if(refresh){
              this.$refs.tables.pageNum = 1;
            }
            this.$refs.tables.search(postData);
        },
        reset() {
            // 重置
            this.queryForm = {
              enable: '',
              name: ''
            };
            this.onSubmit(true)
        },
        handleBack(fresh) {
            this.pathKey = 'main';
            if (fresh) {
              this.onSubmit();
            }
        },
        getStatus(val) {
            let option = this.options.status.find(v => v.value == val)
            return option ? option.label : null
        },
        getType(val) {
            let option = this.options.status.find(v => v.value == val)
            return option ? option.type : null
        },
        deleteFunc(row) {
          this.$delConfirm().then(() => {
            fundsStandardDel(row.id).then(res=>{
              if (res.code == 200) {
                this.$message.success(this.$t('message.deleteSuccess'));
                this.onSubmit(true);
              }
            });
          })
          .catch(e => { });
        },
        // 启用禁用改变
        enableChange(row) {
          let param = {
            id: row.id
          };
          if (row.enable) { // 启用改禁用
            param.enable = false;
          } else { // 禁用改启用
            param.enable = true;
          }
          fundsStandardEnableChange(param).then(res=>{
            if (res.code == 200) {
              this.$message.success(this.$t('course.operateSuccess'));
              this.onSubmit(true);
            }
          });
        }
    }
}
</script>

<style scoped lang="scss">
</style>
